<template>
	<view>
		<view class="label">{{title}}</view>
		<view class="content_box">
			<text class="my_search_btn" style="width: 132rpx;" :class="{'check-btn':checkAll.check}"
				@click="checkSearchTag(checkAll,'checkAll')">{{checkAll.name}}</text>
			<view class="search_btns">
				<text class="my_search_btn fs-24" @click="checkSearchTag(item)" :class="{'check-btn':item.check}"
					v-for="(item,index) in checkList" :key="index">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "l-filter-tag",
		props: {
			title: {
				type: String,
				default: '标题'
			},
			value: {
				type: [String, Array],
				default: '' | []
			},
			list: {
				type: Array,
				default: []
			},
			itemKey: {
				type: String,
				default: 'code'
			},
			// 多选
			multiple: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			checkList() {
				// 添加check 字段
				let sliceOneList = this.list.slice(1)
				sliceOneList.map(item => {
					item['check'] = false
					if (this.multiple) {
						if(this.value){
							this.value.map(m => {
								if (item[this.itemKey] == m) {
									item['check'] = true
								} 
							})
						}
						
					} else {
						if (item[this.itemKey] == this.value) {
							item['check'] = true
						}
					}
					return item
				})
				return sliceOneList
			},
			checkAll() {
				if (this.multiple) {
					this.list[0].check = (this.value == null || this.value.length == 0  )
					return this.list[0]
				}
				this.list[0].check = (this.value == null || this.value == "")
				return this.list[0]
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 筛选类型选择
			checkSearchTag(item,type) {
				
				if (this.multiple) {
					if(type == 'checkAll'){
						item.check = true
						this.checkList.map(m => {
								m.check = false
						})
						this.$forceUpdate()
						this.$emit('input', [])
					}else{
						item.check = !item.check
						this.checkAll.check = false
						this.$forceUpdate()
						let ids = []
						this.checkList.map(item => {
							if (item.check) {
								ids.push(item[this.itemKey])
							}
						})
						this.$emit('input', ids)
					}
					return
				}
				/* if (this.multiple) {
					item.check = !item.check
					this.$forceUpdate()
					let ids = []
					this.checkList.map(item => {
						if (item.check) {
							ids.push(item[this.itemKey])
						}
					})
					console.log(this.checkList,'this.checkList')
					this.$emit('input', ids)
					return
				} */

				this.checkList.map(item => {
					item.check = false
				})
				// 全部选中取消
				this.checkAll.check = false
				item.check = true
				this.$forceUpdate()
				this.$emit('input', item[this.itemKey])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.label {
		font-weight: 500;
		font-size: 28rpx;
		color: #333;
	}

	.content_box {
		display: flex;
		margin: 24rpx 0;
		flex-direction: column;

		.search_btns {
			display: flex;
			flex-wrap: wrap;
		}

		.my_search_btn {
			display: inline-block;
			min-width: 132rpx;
			padding: 0 10rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			text-align: center;
			border: none;
			background-color: #F5F6FA;
			color: #666666;
			margin: 0 10rpx 10rpx 0;
			cursor: pointer;
			border-radius: 8rpx;
			margin-right: 8rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}
		}

		.check-btn {
			background-color: #4070FF;
			color: #fff;
		}

	}
</style>
